//中心页
<template>
  <div class="box">
    <div class="center">
      <img class="img1" src="@/assets/center-1.png" />
    </div>
    <div class="childen">
      <div class="childen-left">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#FFFFFD"
              text-color="green"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="1" @click="index2">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">新闻</span>
              </el-menu-item>
              <br />
              <el-menu-item index="2" @click="index1">
                <i class="el-icon-data-line"></i>
                <span slot="title">用药 </span>
              </el-menu-item>
              <br />
              <el-menu-item index="3" @click="index3">
                <i class="el-icon-chat-round"></i>
                <span slot="title">反馈</span>
              </el-menu-item>
              <br />
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="childen-right">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer">
            <div class="top">
              <img src="@/assets/11111(1)(1).png" style="width: 360px;margin-top: 0px;margin-left: 10px;height: 170px;"/>
            </div>
            <div class="right">
              <h3 class="h3" style="color: aliceblue;margin-left: 30px;font-size: 30px;margin-top: 20px;">快速导航</h3>
              <ul class="ul">
                <li @click="ff1">首页&nbsp;</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <li @click="ff2"><a>识别&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
                <li @click="ff3"><a>百科&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/>
                <li @click="ff4"><a>搜索&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <li @click="ff5"><a>新闻&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
                <li @click="ff6"><a>反馈&nbsp;</a></li><br/><br/>
                <li @click="ff7"><a>用药&nbsp;</a></li>
              </ul>
            </div>
            <div class="right2">
                <h3 class="h3" style="color: aliceblue;margin-left: 30px;font-size: 30px;margin-top: 20px;">关于我们</h3>
                <h4 style="margin-top: -12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;队名&nbsp;:&nbsp;&nbsp;你说对不对队</h4>
                <h3 class="h3" style="color: aliceblue;margin-left: 30px;font-size: 30px;margin-top: -12px;">联系我们</h3><br/>
                <h4 style="margin-top:-40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编号&nbsp;:&nbsp;&nbsp;34014439</h4>
            </div>
        </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      y1: "",
      d1: "",
      tabPosition: "left",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    num() {
      this.y1 = ((this.$refs.d.value / 2) * 1000) / this.$refs.x.value;
      console.log(this.$refs.x.value);
    },
    num2() {
      this.d1 = (this.$refs.y1.value * this.$refs.x1.value) / 500;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    index1() {
      this.$router.push("/Medication/index1");
    },
    index2() {
      this.$router.push("/Medication/index2");
    },
    index3() {
      this.$router.push("/Medication/index3");
    },
    index4() {
      this.$router.push("/Medication/index4");
    },
    ff1() {
      this.$router.push("/home");
      this.$store.commit("setMenuBar", false);
    },
    ff2() {
      this.$router.push("/shibie");
      this.$store.commit("setMenuBar", true);
    },
    ff3() {
      this.$router.push("/baike"); //左侧菜单栏
      this.$router.push("/baike/rightDetail"); //右侧病害列表
      //是否在识别页（顶部菜单栏的识别），true代表是
      this.$store.commit("setMenuBar", false);
    },
    ff4() {
      this.$router.push("/search/search2");
       this.$store.commit("setMenuBar", false);
    },
    ff5(){
      this.$router.push('/Medication/index2')
    },
    ff6(){
      this.$router.push('/Medication/index3')
    },
    ff7(){
      this.$router.push('/Medication/index1')
    },
  },
};
</script>
<style scoped>
.box {
  width: 1100px;
  height: 1150px;
  /* background-color: rgb(0, 210, 140); */
  margin-top: -70px;
}
.childen {
  width: 1100px;
  height: 670px;
  background-color: rgb(255, 255, 255);
}
.childen-left {
  width: 200px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  float: left;
}
.childen-right {
  width: 890px;
  height: 670px;
  background-color: rgb(255, 255, 255);
  float: left;
  margin-left: 9px;
}
.center {
  width: 1100px;
  height: 220px;
  background-color: rgb(255, 255, 255);
}
.img1 {
  width: 1100px;
  height: 220px;
  margin-top: -20px;
}
.footer{
        width:1100px;
        height:230px;
        margin: auto;
        background-color: rgb(207, 213, 206);
        /* background-color: rgb(25, 116, 35); */
        margin-top: 0px;
    }
    .top{
      width:360px;
      height:200px;
      /* background-color: aquamarine; */
      /* background-color: blue;    */
      float: left;
    }
    li{
      list-style: none;
      display: inline-block;
      color: rgb(12, 91, 49);
      font-size: 20px;
    }
.img{
  width:300px;
  height:60px;
}
.right{
        width: 380px;
        height: 230px;
        float: left;
        margin-left: 50px;
        /* background-color: rgb(186, 215, 215); */
    }
    .right2{
        width: 280px;
        height: 230px;
        float: left;
        /* background-color: bisque; */
    }
</style>
